import { SchemaManage } from '@/components/SchemaComponent';
import React, { useRef, useMemo, useState } from 'react';
import { connect, history } from 'umi';
import { PlanManageAPI } from '../common/type';
import { ManageTabSwitch, ManageTableSwitch } from '../mconfig';
import { PlanManageServices } from '../services';
import { getKeyRouter } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import { CancelModal } from '@/components/CancelModal';

const PlanManageView: React.FC<PlanManageAPI.IMaterialManageView> = ({ curRes }) => {
  /**
   * 管理页services
   * */
  const { dataRow, searchList, reloadRequest, pagination, loading } = PlanManageServices(curRes);

  /**管理页的ref*/
  const PlanManageViewRef: any = useRef();

  /**
   * 是否显示作废弹窗
   * */
  const [isShowCancel, setIsShowCancel] = useState<Record<string, any>>({
    isShow: false,
    resObj: {},
  });

  /**
   * 头部权限的切换
   * */
  const switchList: PlanManageAPI.IManageTabsSwitchType = useMemo(() => {
    return ManageTabSwitch(curRes);
  }, [curRes]);

  /**
   * 头部切换方法
   * */
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    reloadRequest({ ...params, ...searchValues });
  };

  /**
   * 重置方法
   * */
  const onReset = (reqParams: PlanManageAPI.IAssetTableRequestType) => {
    reloadRequest({ ...reqParams });
  };

  /**
   * 搜索方法
   * */
  const onSearch = (reqParams: PlanManageAPI.IAssetTableRequestType) => {
    reloadRequest({ ...reqParams });
  };

  /**
   * 分页方法
   * */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    reloadRequest({ pageSize, current, ...params });
  };

  /**
   * Table的操作方法
   * */
  const getTableOperateFuncs = {
    onView: (record: Record<string, any>) => {
      history.push({
        pathname: `/purchasePlanController/getPlanDetails/:${getKeyRouter()}${getKeyRouter()}`,
        state: {
          type: 'view',
          title: '查看申请',
          PlanInfo: record,
        },
      });
    },
    onCancel: (record: Record<string, any>) => {
      setIsShowCancel({
        isShow: true,
        resObj: record,
      });
    },
    onApply: (record: Record<string, any>) => {
      history.push({
        pathname: `/purchaseApplyController/addApply/:${getKeyRouter()}${getKeyRouter()}`,
        state: {
          type: 'add',
          source: 'plan',
          info: record,
          supplyWay: 0,
        },
      });
    },
  };

  /**
   * Table的columns
   * */
  const getTableColumn: Record<string, any>[] = useMemo(() => {
    return ManageTableSwitch(curRes, getTableOperateFuncs);
  }, [curRes]);

  return (
    <>
      <SchemaManage
        ref={PlanManageViewRef}
        searchProps={{
          switchList,
          searchList,
          onSwitch,
          onReset,
          onSearch,
        }}
        actionList={[]}
        tableProps={{
          columns: getTableColumn,
          dataSource: dataRow?.rows, //mockData
          // dataSource: ManageData, //ManageData
          rowKey: 'id',
          loading: loading,
          pagination: pagination as any,
          onPageChange: onPageChange,
        }}
      />
      {/* {
        isShowCancel?.isShow &&
        <CancelModal
          checkRows={isShowCancel?.resObj}
          cancelTypeDic={ILoadMapTypeAll.PROCURE_CANCELTYPE}
          cancelFormTypeRequired={true}
          cancelFormReasonRequired={true}
          modalTitle={'作废计划'}
          cancelRequestUrl={'/purchasePlanController/cancel'}
          cancelRequestBody={{ state: 3 }}
          reloadManage={() => { reloadRequest({}) }}
          onClose={() => {
            setIsShowCancel({
              isShow: false,
              resObj: {},
            })
          }}
        />
      } */}
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(PlanManageView);
